<html>
  <head>
    <title>Station Manager - YouTube TV</title>
    <style>
      span.station {
        font-weight: bold;
        padding: 0.2em;
        margin: 0.2em;
      }
      span.source {
        background: #dfd;
        padding: 0.1em;
        margin: 0.1em;
        font-family: monospace;
      }
      div.stationlabel {
        background: #ddf;
        padding: 0.3em;
      }
    </style>
  </head>
  <body>
    <h1>YouTube TV Station Manager</h1>
    <p>Welcome, {{nickname}}! (<a href="{{logout_url}}">Log out</a>)</p>
    <p>{{message}}</p>
    <p>Stations:</p>
    <ul>
      {% for station in stations %}
        <li><div class="stationlabel">Station: {{station.label}}
        <small>- <a href="?action=delete-station&station={{station.key.id}}">delete</a></small></div>
        <ul>
          {% for source in station.stationsource_set %}
            <li>{{source.type}}: <span class="source">{{source.source}}</span>
            <small>- <a href="?action=delete-source&source={{source.key.id}}">delete</a></small>
          {% endfor %}
          <li><small>- <a href="?action=add-source-form&station={{station.key.id}}">add source</a></small>
        </ul>
      {% endfor %}
    <li><small>- <a href="?action=add-station-form">add station</a></small>
    </ul>
  </body>
</html>
